<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付订阅 - 声破天音乐</title>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="assets/css/payment.css">
</head>
<body>
    <div class="container">
        <!-- 页头 -->
        <div class="header">
            <div class="logo">
                <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="25" cy="25" r="20" fill="#1DB954" />
                    <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2" fill="none" />
                    <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2" fill="none" />
                    <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2" fill="none" />
                    <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white">声破天</text>
                </svg>
            </div>
            <div class="steps">
                <div class="step active">
                    <div class="step-number">1</div>
                    <div class="step-name">选择计划</div>
                </div>
                <div class="step-line"></div>
                <div class="step active">
                    <div class="step-number">2</div>
                    <div class="step-name">付款</div>
                </div>
                <div class="step-line"></div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-name">确认</div>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="content">
            <!-- 左侧支付选项 -->
            <div class="payment-options">
                <h2 class="options-title">选择支付方式</h2>
                
                <!-- 支付方式列表 -->
                <div class="payment-method active" data-method="wechat">
                            <div class="method-icon">
                                <i class="fab fa-weixin"></i>
                            </div>
                    <div class="method-text">
                                <h3>微信支付</h3>
                                <p>使用微信扫描二维码完成支付</p>
                            </div>
                        </div>
                
                        <div class="payment-method" data-method="alipay">
                            <div class="method-icon">
                                <i class="fab fa-alipay"></i>
                            </div>
                    <div class="method-text">
                                <h3>支付宝</h3>
                                <p>使用支付宝扫描二维码完成支付</p>
                            </div>
                        </div>
                
                        <div class="payment-method" data-method="card">
                            <div class="method-icon">
                                <i class="fas fa-credit-card"></i>
                            </div>
                    <div class="method-text">
                                <h3>银行卡</h3>
                                <p>使用银行卡或信用卡完成支付</p>
                        </div>
                    </div>
                
                    <!-- 微信支付详情 -->
                <div class="payment-details" id="wechat-details">
                        <div class="qr-code">
                                <i class="fab fa-weixin"></i>
                                <p>微信支付二维码</p>
                            </div>
                            <h3>如何使用微信支付：</h3>
                    <ol style="margin-left: 20px; color: #aaa;">
                                <li>打开微信应用</li>
                                <li>点击右上角的"+"号，选择"扫一扫"</li>
                                <li>将摄像头对准上方的二维码</li>
                                <li>按照微信提示完成支付</li>
                            </ol>
                    </div>
                    
                    <!-- 支付宝详情 -->
                <div class="payment-details" id="alipay-details" style="display: none;">
                        <div class="qr-code">
                                <i class="fab fa-alipay"></i>
                                <p>支付宝二维码</p>
                            </div>
                            <h3>如何使用支付宝：</h3>
                    <ol style="margin-left: 20px; color: #aaa;">
                                <li>打开支付宝应用</li>
                                <li>点击"扫一扫"</li>
                                <li>将摄像头对准上方的二维码</li>
                                <li>按照支付宝提示完成支付</li>
                            </ol>
                    </div>
                    
                <!-- 银行卡详情 -->
                <div class="payment-details" id="card-details" style="display: none;">
                    <div class="card-form">
                            <div class="form-group">
                                <label for="card-number">卡号</label>
                                <input type="text" id="card-number" placeholder="1234 5678 9012 3456" maxlength="19">
                                <div class="card-brands">
                                    <i class="fab fa-cc-visa"></i>
                                    <i class="fab fa-cc-mastercard"></i>
                                    <i class="fab fa-cc-amex"></i>
                                    <i class="fab fa-cc-discover"></i>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="expiry-date">有效期</label>
                                    <input type="text" id="expiry-date" placeholder="MM/YY" maxlength="5">
                                </div>
                                <div class="form-group">
                                    <label for="cvv">CVV安全码</label>
                                    <input type="text" id="cvv" placeholder="123" maxlength="4">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="card-holder">持卡人姓名</label>
                                <input type="text" id="card-holder" placeholder="请输入持卡人姓名">
                            </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧订单摘要 -->
                <div class="order-summary">
                <h2 class="summary-title">订单摘要</h2>
                <div class="plan-box">
                        <div class="plan-icon">
                            <i class="fas fa-music"></i>
                        </div>
                    <div class="plan-info">
                            <h3>个人会员</h3>
                        <p>18元/月</p>
                        </div>
                    </div>
                    
                    <div class="price-details">
                    <div class="price-row">
                            <span>订阅费用</span>
                        <span>¥18.00</span>
                        </div>
                    </div>
                    
                <div class="total-row">
                        <span>总计</span>
                    <span>¥18.00</span>
                    </div>
                    
                <div class="auto-renew">
                        <i class="fas fa-info-circle"></i>
                        <p>订阅会自动续费，您可以随时取消</p>
                    </div>
                    
                <div class="coupon-input">
                        <input type="text" placeholder="输入优惠码">
                    <button>应用</button>
                </div>
                
                <button class="pay-button">确认支付</button>
                
                <div class="terms">
                    点击"确认支付"，即表示您同意我们的<a href="#">服务条款</a>和<a href="#">隐私政策</a>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 支付方式切换
            const methods = document.querySelectorAll('.payment-method');
            const wechatDetails = document.getElementById('wechat-details');
            const alipayDetails = document.getElementById('alipay-details');
            const cardDetails = document.getElementById('card-details');
            
            methods.forEach(method => {
                method.addEventListener('click', function() {
                    // 移除所有active类
                    methods.forEach(m => m.classList.remove('active'));
                    
                    // 隐藏所有详情
                    wechatDetails.style.display = 'none';
                    alipayDetails.style.display = 'none';
                    cardDetails.style.display = 'none';
                    
                    // 为当前点击项添加active类
                    this.classList.add('active');
                    
                    // 显示对应详情
                    const methodType = this.getAttribute('data-method');
                    if (methodType === 'wechat') {
                        wechatDetails.style.display = 'block';
                    } else if (methodType === 'alipay') {
                        alipayDetails.style.display = 'block';
                    } else if (methodType === 'card') {
                        cardDetails.style.display = 'block';
                    }
                });
            });
            
            // 银行卡表单输入格式化
            const cardNumber = document.getElementById('card-number');
            const expiryDate = document.getElementById('expiry-date');
            const cvv = document.getElementById('cvv');
            
            if (cardNumber) {
                cardNumber.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    value = value.replace(/(\d{4})/g, '$1 ').trim();
                    e.target.value = value;
                });
            }
            
            if (expiryDate) {
                expiryDate.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    if (value.length >= 2) {
                        value = value.slice(0, 2) + '/' + value.slice(2);
                    }
                    e.target.value = value;
                });
            }
            
            if (cvv) {
                cvv.addEventListener('input', function(e) {
                    e.target.value = e.target.value.replace(/\D/g, '');
                });
            }
        });
    </script>
</body>
</html> 